<script lang="ts" setup>
  import { ref } from 'vue';
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';
  const visible = ref<boolean>(false);
  const showModal = () => {
    visible.value = true;
  };
  const handleOk = (e: MouseEvent) => {
    console.log(e);
    visible.value = false;
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">基本用法</div>
    <div class="demo-content">
      <Button type="primary" @click="showModal">Open Modal</Button>
      <Modal v-model:visible="visible" title="Basic Modal" @ok="handleOk">
        <p>Some contents...</p>
        <p>Some contents...</p>
        <p>Some contents...</p>
      </Modal>
    </div>
  </div>
</template>
